<template>
    <div>
        <el-container>
            <el-header>
                <h1 style="margin: 0 auto;">Login Successful!</h1>
            </el-header>
            <el-main>
                <div v-if="!isEditMode">
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="2" style="text-align: right">
                            <span>用户名：</span>
                        </el-col>
                        <el-col :span="2" style="text-align: left">
                            <span>{{ user.username }}</span>
                        </el-col>
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="2" style="text-align: right">
                            <span>电话：</span>
                        </el-col>
                        <el-col :span="2" style="text-align: left">
                            <span>{{ user.phone }}</span>
                        </el-col>
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="9">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="3" style="text-align: right">
                            <span>注册时间：</span>
                        </el-col>
                        <el-col :span="4" style="text-align: left">
                            <span>{{ user.createTime }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="9">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="3" style="text-align: right">
                            <span>上次登录时间：</span>
                        </el-col>
                        <el-col :span="4" style="text-align: left">
                            <span>{{ user.lastloginTime }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="2" style="text-align: right">
                            <span>用户状态：</span>
                        </el-col>
                        <el-col :span="2" style="text-align: left">
                            <span>{{ user.status == 1 ? "可用" : "不可用" }}</span>
                        </el-col>
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="2" style="text-align: right">
                            <span>地址：</span>
                        </el-col>
                        <el-col :span="4" style="text-align: left">
                            <span>{{ user.address }}</span>
                        </el-col>
                        <el-col :span="8">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px">
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                        <el-col :span="2" style="text-align: right">
                            <span>姓名：</span>
                        </el-col>
                        <el-col :span="2" style="text-align: left">
                            <span>{{ user.name }}</span>
                        </el-col>
                        <el-col :span="10">
                            <span>&nbsp;</span>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: -110px" v-if="user.roles != null && user.roles.length > 0">
                        <el-col :span="9"><span>&nbsp;</span></el-col>
                        <el-col :span="3" style="text-align: right">
                            <span>角色列表：</span>
                        </el-col>
                        <el-col :span="12" style="text-align: left">
                            <span v-for="(role, index) in user.roles" :key="index">
                                <el-tag size="mini">{{ role.roleName }}</el-tag>
                            </span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <el-button type="primary" @click="toggleEditMode">编辑</el-button>
                        </el-col>
                    </el-row>
                </div>
                <el-row v-else>
                    <el-col :span="8"></el-col>
                    <el-col :span="8">
                        <el-form class="user-info" label-position="left">
                            <el-form-item label="用户名:">
                                <el-input v-model="user.username" placeholder="用户名:"></el-input>
                            </el-form-item>
                            <el-form-item label="电话:">
                                <el-input v-model="user.phone" placeholder="电话"></el-input>
                            </el-form-item>
                            <el-form-item label="地址:">
                                <el-input v-model="user.address" placeholder="地址"></el-input>
                            </el-form-item>
                            <el-form-item label="姓名:">
                                <el-input v-model="user.name" placeholder="姓名"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="saveChanges">保存</el-button>
                                <el-button @click="toggleEditMode">取消</el-button>
                            </el-form-item>
                        </el-form>
                    </el-col>
                    <el-col :span="8"></el-col>
                </el-row>
            </el-main>
        </el-container>
    </div>
</template>

<script>
import { getInfo, updateUser } from "@/api/login";
import ElementUI from "element-ui";

export default {
    name: "SuccessPage",
    data() {
        return {
            isEditMode: false,
            user: {
                username: "",
            },
        };
    },
    methods: {
        toggleEditMode() {
            this.isEditMode = !this.isEditMode;
        },
        saveChanges() {
            let _this = this;
            updateUser(this.user).then(function (response) {
                if (response.data === "success") {
                    _this.isEditMode = false;
                    ElementUI.Message.success("修改成功");
                } else {
                    ElementUI.Message.error(response.data);
                }
            });
        },
    },
    mounted() {
        getInfo().then((res) => {
            console.log(res.data);
            this.user = res.data;
        });
    },
};
</script>
  
<style scoped>
.success-page {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background-color: #f3f3f3;
}

.user-info {
    background: white;
    padding: 2rem;
    border-radius: 10px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

.user-info h1 {
    font-size: 24px;
    color: #333;
    text-align: center;
    margin-bottom: 1rem;
}

.info-row {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;
    font-size: 18px;
    color: #555;
}

.label {
    font-weight: 600;
}

.button-row {
    display: flex;
    justify-content: center;
    margin-top: 0.5rem;
}

.button-row button {
    margin: 0 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 18px;
    border: none;
    color: #fff;
    background-color: #007bff;
    border-radius: 5px;
    cursor: pointer;
}

.button-row button:nth-child(2) {
    background-color: #6c757d;
}

.info-row input[type="text"] {
    flex: 1;
    margin-left: 10px;
    padding: 0.5rem;
    font-size: 18px;
    border-radius: 5px;
    border: 1px solid #ddd;
}

.el-align-center {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}

.el-row {
    margin-bottom: -15px;
    display: flex;
    flex-wrap: wrap;
}
</style>
  